<template>
	<div class="app">
		<div class="app-header">
			<el-row>
				<el-col :span="4">
					<el-link :underline="false" href="/">
						<div>
							<img class="logo-img" src="./assets/logo.png"/>
							<span class="app-logo">G-图库</span>
						</div>
					</el-link>
				</el-col>
				<el-col :span="20">
					<el-tabs v-model="type" @tab-click="handleClick">
						<el-tab-pane name="G-SVG" label="G-SVG">
						</el-tab-pane>
						<el-tab-pane name="G-DESIGN" label="G-Design">
						</el-tab-pane>
					</el-tabs>
				</el-col>
			</el-row>
		</div>
		<div class="app-main">
			<router-view/>
		</div>
		<div class="copy-right">
			<el-row>
				<el-col :span="6">
					<span class="text">计量房建产品部/业务发展部/用户体验部</span>
				</el-col>
				<el-col :span="12">
				</el-col>
				<el-col :span="6">
					<span class="text">zhengsc@glodon.com</span>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
import router from "./router";
export default {
	name: "App",
	data() {
		return {
			type: 'G-SVG'
		}
	},
	methods: {
		handleClick(tab, event) {
			if (this.type === 'G-SVG') {
				router.push({name: 'svg'})
			} else {
				router.push({name: 'design'})
			}
		}
	},
	created() {
		if (window.location.pathname.indexOf('g-design') > -1) {
			this.type = 'G-DESIGN'
		}
	},
};
</script>

<style lang="scss">
body {
	margin: 0px;
	/*font-family: Avenir, Helvetica, Arial, sans-serif;*/
	font-family: Microsoft YaHei, Microsoft YaHei-Regular;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
}
.app {
	overflow: hidden;
}
.app-header {
	/*opacity: 1;*/
	position: fixed;
	top: 0;
	width: 100%;
	background: #fff;
	z-index: 10;
	height: 60px;
	box-shadow: 1px 0px 5px rgba($color: #000000, $alpha: 0.39);

	.el-tabs__nav-scroll{
		width:30%;
		margin:0 auto
	}

	.el-tabs__nav-wrap::after {
		height: 0px;
	}

	.el-tabs__item {
		font-size: 16px;
		color: #333333;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: bold;
		height: 60px;
		line-height: 60px;
	}
	.el-tabs__header {
		padding: 0;
		position: relative;
		margin-bottom: 0;
	}
}
.logo-img{
margin-top: 16px;
}
.app-logo{
width: 70px;
height: 20px;
font-size: 20px;
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
font-weight: bold;
text-align: left;
color: #1874e6;
letter-spacing: 1px;
margin-left: 5px;
vertical-align: super;
}
.app-main {
/*margin-top: 60px;*/
/*padding: 20px;*/
/*padding-bottom: 50px;*/
/*position: inherit;*/
z-index: 99;
}
.copy-right {
position: fixed;
bottom: 0;
// left: 50%;
// transform: translate(-50%);
width: 100%;
height: 30px;
text-align: center;
font-size: 12px;
color: #fff;
padding: 5px 10px;
background: #202124;

.text {
    width: 250px;
    height: 14px;
    font-size: 14px;
    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
    font-weight: 400;
    text-align: left;
    color: #ffffff;
    line-height: 30px;
}
}
</style>
